<template>
    <ul class="footer">
        <li class="fl" @click='pageToggle("store");'>
          <router-link to="/recommendStore"><img src="../assets/image/store_default_ico.png" :class="{'hidden' : pageType == 'recommendStore'}"><img src="../assets/image/store_select_ico.png" :class="{'hidden' : pageType != 'recommendStore'}"/><p>推荐店铺</p></router-link>
        }
        }
        </li>
        <li class="fl" @click='pageToggle("mall");'>
          <router-link to="/index"><img src="../assets/image/mall_default_ico.png" :class="{hidden : pageType == 'index'}"><img src="../assets/image/mall_select_ico.png" :class="{hidden : pageType != 'index'}"/><p>商城</p></router-link>
        </li>
        <li class="fl" @click='pageToggle("fit");'>
          <router-link to="/fit" class="fitting-room"><img src="../assets/image/fitroom@2x.png"></router-link>
        </li>
        <li class="fl" @click='pageToggle("shopcar");'>
          <router-link to="/shopCar"><img src="../assets/image/shopcar_default_ico.png" :class="{hidden : pageType == 'shopcar'}"><img src="../assets/image/shopcar_select_ico.png" :class="{hidden : pageType != 'shopcar'}"/><p>购物车</p></router-link>
        </li>
        <li class="fl" @click='pageToggle("my");'>
          <router-link to="/personalCenter"><img src="../assets/image/my_default_ico.png" :class="{hidden : pageType == 'my'}"><img src="../assets/image/my_select_ico.png" :class="{hidden : pageType != 'my'}"/><p>我的</p></router-link>
        </li>
    </ul>
</template>
<script>
  import Vue from 'vue'
  export default {
    data () {return {
      toPage:'store'
    }},
    props: {
      pageType : {
        type: String,
      }
    },
    methods:{
      pageToggle:function(tabText){
        this.toPage= tabText;
      }
    }
  }
</script>
<style lang="scss">
  .footer{
    position:fixed; bottom:0; left:0; width: 100%; height: 0.88rem; background: url("../assets/image/tabbar_bg.png") no-repeat; background-size: 100% 0.88rem;    
    li{
      width: 20%; height: 0.88rem;
      a{
        display: block; width:100%; height: 0.88rem;
        img{ width: 0.39rem; height: 0.39rem; margin: 0.2rem auto 0.05rem;}
        p{font-size: 0.2rem; color: #151517; text-align: center; line-height: 0.2rem;}
      }
      .fitting-room{
        display: block; width: 0.9rem; height: 0.9rem; margin: -0.33rem auto 0;
        img{ width: 0.9rem; height: 0.9rem;}
      }
    }
  }
</style>
